<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use front\assets\AppAsset;
use yii\helpers\Url;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>新增地址</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <script src="/static/script/zepto.min.js"></script>
    <script src="/static/script/transform.region.js"></script>
    <script src="/static/script/region.func.js"></script>
    <script src="/static/script/region.data.js"></script>
</head>
<body class="m-act-adrs">

	<dl class="fm f-cb"><dt>收货人</dt><dd><input type="text" placeholder="名字" id="username"/></dd></dl>
	<dl class="fm f-cb"><dt>手机号码</dt><dd><input type="text" placeholder="联系方式" id="phone" /></dd></dl>

	<input type="hidden" id="J_valCity" value="" />
	<dl class="fm f-cb"><dt>收货地址</dt><dd class="arrow" id="J_forCity">省/市/区</dd></dl>
	<dl class="fm f-cb"><dt>详细地址</dt><dd><input type="text" placeholder="请输入" id="detailAddr"/></dd></dl>

	<a class="chk z-on" id="J_setDft" href="javascript:;">设为默认地址</a>

	<a class="btn z-ajaxSunmit" id="J_addAddressListInfo"><span>确定</span></a>

	<div class="mask" id="J_mask"></div>

	<div class="m-region" id="J_sltCity">
		<h6 class="f-cb"><span>选择省/市/区</span><a href="javascript:submit();" id="j-sure-region">完成</a></h6>
	    <h5><span>省</span><span>市</span><span>区</span></h5>
	    <h4></h4>
	    <div><ul class="j-prov"></ul></div>
	    <div><ul class="j-city"></ul></div>
	    <div><ul class="j-area"></ul></div>
	</div>

	<script>






        /* ----------------------------- */
	
	// 预定义变量
	var eleFst, eleScd, eleThd;
	var jFst = '.j-prov', jScd = '.j-city', jThd = '.j-area';
	var cfg = [40, 2]; // 此处修改需要修改对应的CSS值
	var init = {0:['31', '上海市'], 1:['3101', '上海市'], 2:['310101', '黄浦区']};

	// 匿名选择器
	var GC = function(c){ return document.querySelector(c); };
	var GI = function(i){ return document.getElementById(i); };

	// 选择地区弹窗开启 & 确定地区关闭弹窗
	GI('J_forCity').addEventListener('touchend', showRegion, false);
	GI('j-sure-region').addEventListener('touchend', closeRegion, false);

	// [函数] 选择地区弹窗开启
	function showRegion(){

	    // 省级 & 市级 & 县级HTML
	    GC(jFst).innerHTML = obRegion.createOptions(cfg[1], obRegion.prov);
	    GC(jScd).innerHTML = obRegion.createOptions(cfg[1], obRegion.retSubDataById(init[0][0]));
	    GC(jThd).innerHTML = obRegion.createOptions(cfg[1], obRegion.retSubDataById(init[1][0]));

	    // 开启 遮罩 & 选择的弹窗
	    GI('J_sltCity').style.cssText = obRegion.kernel() + 'transition:all .15s linear;'+ obRegion.kernel() +'transform:translateY(-290px);';
	    GI('J_mask').style.display = 'block';

	    // 省级 滑动
	    eleFst = new zTransform(jFst, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[0][0]),
	        complete : function (i){

	            // 级联 市级
	            var el = document.querySelector(jFst + ' > li:nth-child('+ (i + 1) +')');
	            var pid = el.getAttribute('data-id'), ptxt = el.textContent;
	            var psub = obRegion.retSubDataById(pid);
	            GC(jScd).innerHTML = obRegion.createOptions(cfg[1], psub);
	            eleScd.reFresh();
	            
	            // 级联 县级[存在则显示，反之隐藏]
	            var carr = obRegion.retFirst(psub);
	            var cid = carr[0], ctxt = carr[1];
	            var csub = obRegion.retSubDataById(cid);
	            var sel = document.querySelector(jThd);
	            if(csub){
	                sel.innerHTML = obRegion.createOptions(cfg[1], csub);
	                sel.style.display = 'block';
	                eleThd.reFresh();
	                var aarr = obRegion.retFirst(csub);
	                var aid = aarr[0], atxt = aarr[1];
	            }else{
	                sel.style.display = 'none';
	                var aid = '', atxt = '';
	            }

	            init = {0:[pid, ptxt], 1:[cid, ctxt], 2:[aid, atxt]};
	        }
	    });

	    // 市级 滑动
	    eleScd = new zTransform(jScd, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[1][0]),
	        complete : function(i){

	            // 级联 县级[存在则显示，反之隐藏]
	            var el = document.querySelector(jScd + ' > li:nth-child('+ (i + 1) +')');
	            var cid = el.getAttribute('data-id');
	            init[1] = [cid, el.textContent];
	            var csub = obRegion.retSubDataById(cid);
	            var sel = document.querySelector(jThd);
	            if(csub){
	                sel.innerHTML = obRegion.createOptions(cfg[1], csub);
	                sel.style.display = 'block';
	                eleThd.reFresh();
	                var aarr = obRegion.retFirst(csub);
	                init[2] = [aarr[0], aarr[1]];
	            }else{
	                sel.style.display = 'none';
	                init[2] = ['', ''];
	            }
	        }
	    });

	    // 县级 滑动
	    eleThd = new zTransform(jThd, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[2][0]),
	        complete : function(i){
	            var el = document.querySelector(jThd + ' > li:nth-child('+ (i + 1) +')');
	            init[2] = [el.getAttribute('data-id'), el.textContent];
	        }
	    });
	}

	// [函数] 确定地区关闭弹窗
	function closeRegion(event){

	    // 关闭 遮罩 & 选择的弹窗
	    GI('J_sltCity').style.cssText = obRegion.kernel() + 'transition:all .15s linear;'+ obRegion.kernel() +'transform:translateY(0px);';
	    GI('J_mask').style.display = 'none';

	    // 注: 解锁DOM滚动条
	    eleFst.removeDocLit();
	    eleScd.removeDocLit();
	    eleThd.removeDocLit();

	    // 组合值
	    var _txt = [], _val = [];
	    for(var i in init){
	        var rs = init[i];
	        if(rs[0] != '' && rs[1] != ''){
	            _txt.push(rs[1]);
	            _val.push(rs[0]);
	        }
	    }

	    // 赋值
	    GI('J_forCity').innerHTML = _txt.join('|');
	    GC('#J_valCity').value = _val.join('|') + ',' + _txt.join('|');

	    // 防止穿透
	    event.preventDefault();
	}

	/* ----------------------------- */

	$(function(){

		// 
		var zon = 'z-on';
		$('#J_setDft').on('touchend', function(evt){

			var _this = $(this);
			if(_this.hasClass(zon)){
				_this.removeClass(zon);
			}else{
				_this.addClass(zon);
			}

			evt.preventDefault();
			return false;
		});

        $('#J_addAddressListInfo').on('touchend', function(evt){
               if(!$(this).hasClass('z-ajaxSunmit')) return false;
                if ($('#username').val() == "") {
                    msgPopup("请填写收货人！");
                    return;
                }

                var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
                if (!reg.test($('#phone').val())) {
                    msgPopup("请填写正确的手机号码");
                    return;
                }

                var district = $('#J_valCity').val();
                if (district == "") {
                    msgPopup("请选择您所在区域!");
                    return;
                }

                var arr = [];
                arr = district.split("|");
                var arr_char = district.split(",");
                var district_char = arr_char[1];
                arr = arr[2].split(",");
                district = 0 + arr[0];
                var detailAddress = $("#detailAddr").val();

                if (detailAddress == "") {
                    msgPopup("请填写详细地址！");
                    return;
                }

                if($('#J_setDft').hasClass('z-on')){
                    isdefault = 1;
                }else{
                    isdefault = 0;
                }

                var detailadd = district_char+detailAddress;
                $("#j-addresschar",window.parent.parent.document).text(detailadd);
                $("#j-name",window.parent.parent.document).text('收货人: '+$('#username').val());
                $("#J-address",window.parent.parent.document).attr('data-site',district);
                $("#j-addr_default",window.parent.parent.document).val(isdefault);
                $("#j-mobile",window.parent.parent.document).text($('#phone').val());
                $("#j-edit",window.parent.parent.document).text('收货地址:');
                var data={name:$('#username').val(),default:isdefault,district:district,address:detailAddress,mobile:$('#phone').val()};
                $('#J_addAddressListInfo').removeClass('z-ajaxSunmit');
                $.post("<?=url::to('/web/order/addaddrinfo')?>", data, function(data) {
                    if(data == 1) {
                        window.location.href='/web/order/addaddr';
                        evt.preventDefault();
                        return !1;
                    }else if(data ==2 ) {
                        msgPopup('手机号码格式错误',3000);
                    }else{
                        msgPopup('添加失败',3000);
                    }
                })
        });

	});

	</script>
